<!DOCTYPE html>

<html>
<head>
  <title>root.js</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="../../../docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>root.js</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <p>Root nodes contain the top-level <a href="./regexp.html">Regexp</a> node. Any flags
and a few decorative elements are rendered by the root node.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">import</span> _ <span class="hljs-keyword">from</span> <span class="hljs-string">'lodash'</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-attr">type</span>: <span class="hljs-string">'root'</span>,

  <span class="hljs-attr">flagLabels</span>: {
    <span class="hljs-attr">y</span>: <span class="hljs-string">'粘连'</span>,
    <span class="hljs-attr">u</span>: <span class="hljs-string">'Unicode'</span>,
    <span class="hljs-attr">i</span>: <span class="hljs-string">'忽略大小写'</span>,
    <span class="hljs-attr">g</span>: <span class="hljs-string">'全局'</span>,
    <span class="hljs-attr">m</span>: <span class="hljs-string">'多行匹配'</span>
  },</pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>Renders the root into the currently set container.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  _render() {
    <span class="hljs-keyword">let</span> flagText;</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Render a label for any flags that have been set of the expression.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.flags.length &gt; <span class="hljs-number">0</span>) {
      flagText = <span class="hljs-keyword">this</span>.container.text(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-string">`修饰符: <span class="hljs-subst">${<span class="hljs-keyword">this</span>.flags.join(<span class="hljs-string">', '</span>)}</span>`</span>);
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>Render the content of the regular expression.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.regexp.render(<span class="hljs-keyword">this</span>.container.group())
      .then(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Move rendered regexp to account for flag label and to allow for
decorative elements.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">if</span> (flagText) {
          <span class="hljs-keyword">this</span>.regexp.transform(Snap.matrix()
            .translate(<span class="hljs-number">10</span>, flagText.getBBox().height));
        } <span class="hljs-keyword">else</span> {
          <span class="hljs-keyword">this</span>.regexp.transform(Snap.matrix()
            .translate(<span class="hljs-number">10</span>, <span class="hljs-number">0</span>));
        }

        <span class="hljs-keyword">let</span> box = <span class="hljs-keyword">this</span>.regexp.getBBox();</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Render decorative elements.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">this</span>.container.path(<span class="hljs-string">`M<span class="hljs-subst">${box.ax}</span>,<span class="hljs-subst">${box.ay}</span>H0M<span class="hljs-subst">${box.ax2}</span>,<span class="hljs-subst">${box.ay}</span>H<span class="hljs-subst">${box.x2 + <span class="hljs-number">10</span>}</span>`</span>);
        <span class="hljs-keyword">this</span>.container.circle(<span class="hljs-number">0</span>, box.ay, <span class="hljs-number">5</span>);
        <span class="hljs-keyword">this</span>.container.circle(box.x2 + <span class="hljs-number">10</span>, box.ay, <span class="hljs-number">5</span>);
      });
  },

  setup() {</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>Convert list of flags into text describing each flag.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">this</span>.flags = _(<span class="hljs-keyword">this</span>.properties.flags.textValue)
      .uniq().sort()
      .map(<span class="hljs-function"><span class="hljs-params">flag</span> =&gt;</span> <span class="hljs-keyword">this</span>.flagLabels[flag]).value();

    <span class="hljs-keyword">this</span>.regexp = <span class="hljs-keyword">this</span>.properties.regexp
  }
};</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
